<!DOCTYPE html>
<html lang="CN" >
<head>
  <meta charset="UTF-8">
  <title>橘猫</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/pwo6ytv.css"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
  <header>
    <h1>和“大胖橘”小狸一起吃小鱼干吧</h1>
    <p style="text-indent:2em;">橘猫是家猫常见的一种猫，普遍存在于混种猫和不具独特规定毛色的注册纯种猫种，与任何品种无关，只与被毛遗传基因有关。</p>
    <p style="text-indent:2em;">橘猫的毛色通常分成全橘色、橘白相间两种。全橘色的猫，身上会带有浅浅白色条纹相间，仅有少数猫会在肚子呈现白色。橘白相间的猫，身上有大块橘色斑块与白底毛色相间。</p>
    <p style="text-indent:2em;">家中饲养的橘猫给人的印象是个性活泼好动也比较爱叫，幼猫时期非常调皮爱玩，喜欢向人撒娇且非常亲人。成年后的橘猫个性略为沉稳，但向人撒娇的功力没有变弱，甚至更加亲人。</p>
    <button type="button" id="alpha-order" class="button-inline">Felis silvestris catus.</button>
     <div style="position: relative;">
  <button class="raise" onclick="game()" style="background-color: #2f90b9">进入测试小游戏</button>
  <button class="raise" onclick="back()" style="background-color: #2f90b9">返回首页</button>
</div>
  </header>

  <div class="grid">
    <article class="article article-1">
      <a href="#">
        <img src="https://wx4.sinaimg.cn/large/c1edaa5fgy1gxp6lxdmpqj22c0340u0y.jpg" alt="">
      </a>
      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>
    <article class="article article-2">
      <a href="#">
        <img src="https://wx2.sinaimg.cn/large/c1edaa5fgy1gxp6lsimprj21401e07ck.jpg" alt="">
      </a>
      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>
    <article class="article article-3">
      <a href="#">
        <img src="https://wx3.sinaimg.cn/large/686ea73bgy1gxp97rhvdjj218z0u0h12.jpg" alt="">
      </a>

      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>
    <article class="article article-4">
      <a href="#">
        <img src="https://wx3.sinaimg.cn/large/686ea73bgy1gxp98g694mj21900u0qet.jpg" alt="">
      </a>
      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>
    <article class="details article article-5" style="--max:1">
      <a href="#">
        <img src="https://wx1.sinaimg.cn/large/686ea73bgy1gxp97cvjiaj21900u014d.jpg" alt="">
      </a>
      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view" style="opacity: 1; transform: translateY(0)">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>
    <article class="article article-6">
      <a href="#">
        <img src="https://wx2.sinaimg.cn/large/686ea73bgy1gxp98pklcgj21900u0qen.jpg" alt="">
      </a>
      <section class="description">
        <h2>Felis silvestris catus</h2>
        <div class="details-view">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p>
          <button type="button">Move to top</button>
        </div>
      </section>
    </article>

    
  </div>
</main>
<!-- partial -->
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js'></script><script  src="./script.js"></script>
<script type="text/javascript">
function game(){
  window.open('./3.html')
}
function back(){
  window.open('./2.html')
}
(function () {
  $(".flex-container").waitForImages(
    function () {
      $(".spinner").fadeOut();
    },
    $.noop,
    true
  );

  $(".flex-slide").each(function () {
    $(this).hover(
      function () {
        $(this).find(".flex-title").css({
          transform: "rotate(0deg)",
          top: "10%"
        });
        $(this).find(".flex-about").css({
          opacity: "1"
        });
      },
      function () {
        $(this).find(".flex-title").css({
          transform: "rotate(90deg)",
          top: "15%"
        });
        $(this).find(".flex-about").css({
          opacity: "0"
        });
      }
    );
  });
})();
</script>

</body>
</html>
